<template>
	<view class="page login">
		<view class="img-a">
			<view class="t-b">
				您好,
				<br />
				<!-- #ifndef APP-PLUS -->
				欢迎使用，友星缘小程序
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				欢迎使用，友星缘APP
				<!-- #endif -->
			</view>
		</view>
		<view class="login-view" style="">
			<view class="t-login">
				<uni-forms class="cl" :modelValue="loginForm" :rules="rules" validate-trigger="bind">
					<uni-forms-item name="userName" class="t-a">
						<view style="margin-bottom: 40rpx;">
							<text class="txt">手机号</text>
						</view>
						<uni-easyinput type="text" maxlength="11" :inputBorder="false" v-model="loginForm.userName"
							prefix-icon="person" placeholder="请输入手机号" />
					</uni-forms-item>
					<uni-forms-item name="password" class="t-a">
						<view style="margin-bottom: 40rpx;">
							<text class="txt">密码</text>
						</view>
						<uni-easyinput type="password" :inputBorder="false" v-model="loginForm.password"
							prefix-icon="locked" placeholder="请输入密码" maxlength="12"/>
					</uni-forms-item>
					<view style="padding-top: 40rpx;">

						<button class="btn-submit" @click="submit" type="primary">登 录</button>
						<navigator class="reg" url="/pageSubOne/register/register">注 册</navigator>
						<!-- #ifndef APP-PLUS -->
						<button class="anonymous-submit" @click="anonymousLogin" type="primary">匿名注册</button>
						<!-- #endif -->
					</view>
                    
					<view class="privacy">
						<radio value="r1" :checked="loginForm.checked" @click="changeCheck" color="#0079ff" />同意
						<navigator class="nav-privacy" url="/pageSubOne/agree/privacy/privacy">
							《隐私协议》
						</navigator>
						<navigator class="nav-privacy" url="/pageSubOne/agree/user/user">
							《用户协议》
						</navigator>
					</view>
				</uni-forms>
				<navigator class="forgetPassword" url="/pageSubOne/forgetPassword/forgetPassword">忘记密码 ?</navigator>
				<!-- <navigator class="nav-register" url="/pageSubOne/register/register">
					注册
				</navigator> -->

				<up-popup :show="show" :round="10" mode="center" @close="close">
					<view class="popup-box">
						<view class="input-code">
							<uni-easyinput type="text" v-model="answer" placeholder="请输入验证码"></uni-easyinput>
							<jp-verification-literalness ref="code"></jp-verification-literalness>
						</view>
						<view class="group-button">
							<button class="btnwarn" type="warn" @tap.stop="show = false">关闭</button>
							<button class="btnpri" type="primary" @tap.stop="confirmCode">确认</button>
						</view>
					</view>
				</up-popup>
			</view>
		</view>
	</view>

	<view>
		<up-modal title="注册成功" :show="isTips" showCancelButton closeOnClickOverlay cancelText="登录" confirmText="修改密码"
			contentTextAlign="left" @confirm="confirm" @cancel="cancel">
			<view class="main-layout" @click="copyText(passwordText)">
				<view class="first-row">{{ tips }}</view>
				<view class="second-row">密码：{{ passwordText }}
					<svg-icon icon="copy" class="code"></svg-icon>
				</view>
			</view>
		</up-modal>
	</view>
</template>

<script>
	import userStore from '../../store/userStore'
	export default {
		data() {
			return {
				isTips: false,
				show: false, //验证码弹出层
				answer: "",
				loginForm: {
					terminal: this.$terminal, // APP终端
					userName: '',
					password: '',
					checked: false,
				},
				rules: {
					userName: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号',
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '请输入密码',
						}]
					}
				},
			}
		},
		methods: {
			close() {
				this.show = false
			},
			// reg() {
			// 	uni.navigateTo({
			// 		url: '/pageSubOne/register/register'
			// 	})
			// },
			anonymousLogin() {
				if (this.loginForm.checked) {

					// this.show = true


					// 用户匿名注册之后 弹出

					this.$http({
						url: '/anonymousRegister',
						method: 'POST'
					}).then(res => {
						// 匿名登录之后 把token放到storage里
						uni.setStorageSync("loginInfo", res.token);

						const userName = res.userinfo.userName
						const password = res.userinfo.password
						uni.setStorageSync("userName", userName);
						uni.setStorageSync("password", password);
						this.passwordText = password
						this.loginForm.userName = userName
						this.loginForm.password = password
						this.tips = `您注册的用户账号为:${userName},密码为:${password},请您尽快修改密码!`
						this.isTips = true


					});
				} else {
					uni.showToast({
						title: "请先同意协议",
						icon: "error"
					})
				}
			},
			confirmCode() {
				if (this.$refs.code.verification(this.answer)) {
					// base64加密后的公钥是
					var encryptedPubKey =
						'LS0tLS1CRUdJTiBQVUJMSUMgS0VZLS0tLS0KTUlHZk1BMEdDU3FHU0liM0RRRUJBUVVBQTRHTkFEQ0JpUUtCZ1FDdCtORFV2TmptcmxjclBJRytjanlwZTNMawpVaUNHWWN3aUZTVXVPZ0FzbHNER3VzZE8xaGV6ZDA2ZloxMlZsQzhtYXZBUitrMTg4U2F5V2tEbUo3R1BoVWtxCnE4M0Y2elEzSVJUTUZDa0g1STBibHZ4TmFKaHVIZTh0cHJGdzhsVGtQUTNJK2xyQ2Vsb29Bb0VRc1JvV2w2MlUKTnNHaGRPTnNLUnBGOWlkU3FRSURBUUFCCi0tLS0tRU5EIFBVQkxJQyBLRVktLS0tLQ==';

					// 解码 Base64 字符串
					var decryptedPubKey = atob(encryptedPubKey); // 使用 atob() 方法来解码 Base64

					var encryptor = new JSEncrypt() // 创建加密对象实例

					encryptor.setPublicKey(decryptedPubKey) //设置公钥
					var rsaPassWord = encryptor.encrypt(this.answer) // 对内容进行加密
					console.log('rsaPassWord', rsaPassWord)
				}
			},
			cancel() {
				this.isTips = false
				uni.switchTab({
					url: "/pages/tabbar/chat"
				})
			},
			confirm() {
				uni.navigateTo({
					url: "/pageSubOne/mine/mine-password?password=" + this.loginForm.password
				})
				this.isTips = false
			},
			submit() {
				if(this.loginForm.userName == ""
				|| this.loginForm.password == ""){
					uni.showToast({
						title:"用户名或密码不能为空",
						icon: "error"
					})
					return;
				}
				if (this.loginForm.checked) {
					// 先全部清除
					this.$http({
						url: '/login',
						data: this.loginForm,
						method: 'POST'
					}).then(loginInfo => {
						console.log("登录成功,自动跳转到聊天页面...")
						uni.setStorageSync("userName", this.loginForm.userName);
						uni.setStorageSync("password", this.loginForm.password);
						uni.setStorageSync("loginInfo", loginInfo);
						// 调用App.vue的初始化方法
						getApp().$vm.init()
						// 跳转到聊天页面
						uni.switchTab({
							url: "/pages/tabbar/chat"
						})
					})
				} else {
					uni.showToast({
						title: "请先同意协议",
						icon: "error"
					})
				}
			},
			changeCheck() {
				this.loginForm.checked = !this.loginForm.checked
			}
		},
		onLoad() {
			console.log(this.userStore.isLogin());
			if (this.userStore.isLogin()) {
				uni.showToast({
					title: "您已登录，正在为您跳转首页",
					icon: "none",
					duration: "2000"
				}).then(() => {
					uni.switchTab({
						url: "/pages/tabbar/chat"
					})
				})
			}
			this.loginForm.userName = uni.getStorageSync("userName");
			this.loginForm.password = uni.getStorageSync("password");
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/styles/variables.scss';

	.login {
		position: relative;
		height: 100vh;
		background-color: #ffffff !important;

		.popup-box {
			width: 560rpx;
			padding: 40rpx;
			// height: 300rpx;

			:deep(.uni-easyinput__content-input) {
				height: 120rpx;
			}

			.input-code {
				display: flex;
				align-items: center;
			}

			.group-button {
				display: flex;
				align-items: center;
				margin-top: 40rpx;

				.btnwarn {
					width: 250rpx;
					border-radius: 60rpx;
				}

				.btnpri {
					width: 250rpx;
					border-radius: 60rpx;
				}
			}
		}

		.anonymous-submit {
			font-size: 28rpx;
			background: #2796f2;
			color: #fff;
			height: 90rpx;
			line-height: 90rpx;
			border-radius: 50rpx;
			font-weight: bold;
			margin-top: 30rpx;
		}

		.img-a {
			width: 100%;
			height: 450rpx;
			background-image: url(https://zhoukaiwen.com/img/loginImg/head.png);
			background-size: 100%;
		}

		.t-b {
			text-align: left;
			font-size: 42rpx;
			color: #ffffff;
			padding: 130rpx 0 0 70rpx;
			font-weight: bold;
			line-height: 70rpx;
		}

		.login-view {
			width: 100%;
			// position: relative;
			margin-top: -120rpx;
			background-color: #ffffff;
			border-radius: 8% 8% 0% 0;

			.t-login {
				width: 600rpx;
				margin: 0 auto;
				font-size: 28rpx;
				padding-top: 100rpx;

				.btn-submit {
					font-size: 28rpx;
					background: #2796f2;
					color: #fff;
					height: 90rpx;
					line-height: 90rpx;
					border-radius: 50rpx;
					font-weight: bold;
				}

				.reg {
					font-size: 28rpx;
					color: #fff;
					height: 90rpx;
					line-height: 90rpx;
					border-radius: 50rpx;
					font-weight: bold;
					background: #f5f6fa;
					color: #000000;
					text-align: center;
					margin-top: 30rpx;
				}

				::v-deep .uni-easyinput {
					border-bottom: 1px solid #eee;
				}

				.cl {
					zoom: 1;
				}

				.cl:after {
					clear: both;
					display: block;
					visibility: hidden;
					height: 0;
					content: '\20';
				}

				.t-a {
					position: relative;
				}

			}

		}

		.privacy {
			width: 100%;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 30rpx;
		}

		.txt {
			font-size: 32rpx;
			font-weight: bold;
			color: $uni-color-title;
		}

		.title {
			height: 30vh;
			font-size: 25px;
			font-weight: bold;
			color: $color-black;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding-left: 20px;
			gap: 10px;
		}
	}

	.nav-privacy {
		color: #2796f2;
	}

	.form {
		padding: 0 50rpx;
	}

	.message {
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.register {
			color: $color-blue;
		}
	}

	.footer {
		position: fixed;
		bottom: 30rpx;
		width: 100%;
		text-align: center;
		color: $color-message;
	}
	.forgetPassword{
		text-align: center;
		margin-top: 10px;
		font-size: 12px;
		color: gray;
	}
</style>